<!--
  ~ Electronic Logistics Management Information System (eLMIS) is a supply chain management system for health commodities in a developing country setting.
  ~
  ~ Copyright (C) 2015  John Snow, Inc (JSI). This program was produced for the U.S. Agency for International Development (USAID). It was prepared under the USAID | DELIVER PROJECT, Task Order 4.
  ~
  ~ This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
  ~
  ~ This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
  ~
  ~ You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
  -->

<script id="template/accordion/accordion.html" type="text/ng-template">
    <div class="accordion" ng-transclude></div>
</script>

<script id="template/accordion/accordion-group.html" type="text/ng-template">
    <div class="accordion-group">
        <div class="accordion-heading" style="margin-bottom:0; border-bottom:0">
            <a style="bottom:0" class="accordion-toggle" ng-click="isOpen = !isOpen" accordion-transclude="heading">{{heading}}</a>
        </div>
        <div class="accordion-body" style="display:block; margin-bottom:0" collapse="!isOpen">

            <div class="accordion-inner" ng-transclude></div>
        </div>
    </div>
</script>
<div xmlns="http://www.w3.org/1999/html">

    <h2><span openlmis-message="label.summary.of.rnr.status"></span></h2>


    <div class="row-fluid">
        <div class="span12">

            <ng-include src="'/public/pages/dashboard/shared/dashboard-form.html'"></ng-include>


        </div>
    </div>
    <accordion>
        <accordion-group class="blue-light" is-open="rnrStatus.openPanel">

            <accordion-heading>
                <div class="accordion-title">
                    <div class="caption">
                        <i class="flaticon-pie2"></i> <span
                            openlmis-message="label.rnr.status.summary.report"></span>
                    </div>
                    <div class="tools">
                        <i ng-class="{'icon-minus-sign': rnrStatus.openPanel, 'icon-plus-sign': !rnrStatus.openPanel}"></i>
                    </div>
                </div>
            </accordion-heading>

            <div class="filter-value">
                <ul>
                    <li><span openlmis-message="label.program"></span>:<span class="filter-label">{{formFilter.programName}}</span>
                    </li>
                    <li><span openlmis-message="label.period"></span>:<span class="filter-label">{{formFilter.periodName}}</span>
                    </li>
                    <li><span openlmis-message="label.zone"></span>:<span
                            class="filter-label">{{formFilter.zoneName}}</span></li>
                </ul>
            </div>
            <div class="row-fluid">
                <div class="app-form2 span7">

                        <div ng-hide="RnRStatusPieChartData"><label class="chart-note">No data to render chart</label>
                        </div>
                        <div ng-show="RnRStatusPieChartData">

                            <div id="rnrStatusReportLegend" style="" class="rnrStatusChartLegend"></div>
                            <a-float id="rnr-status-report" af-option="rnRStatusPieChartOption"
                                     af-data="RnRStatusPieChartData" class="rnrStatusChart" ></a-float>

                        </div>

                </div>
                <div class="span5">

                    <div ng-hide="RnRStatusPieChartData"><label class="chart-note">No data to show under selected
                        filter</label></div>
                    <div ng-show="RnRStatusPieChartData !== undefined && RnRStatusPieChartData.length > 0">
                        <table ng-show="RnRStatusPieChartData.length > 0"
                               class="table table-striped table-scrollable pull-right"
                               ng-table="tableParams">
                            <tbody>
                            <tr ng-repeat="row in dataRows" >
                                <td  data-title="'Pending at'"  ><span
                                        openlmis-message="label.rnr.status.summary.{{row.status}}"></span></td>
                                <td data-title="'Number Of RnR'">{{row.totalStatus}}</td>


                            </tr>
                            <tr>
                                <td style="font-weight: bold;text-align: left;" openlmis-message="label.rnr.status.total.regular"></td>
                                <td class="number" style="font-weight: bold;text-align: left;">{{total}}

                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold;text-align: left;" openlmis-message="label.rnr.status.total.emergency"></td>
                                <td class="number" style="font-weight: bold;text-align: left;">{{totalEmergency}}

                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight: bold;text-align: left;" openlmis-message="label.rnr.status.total.overall"></td>
                                <td class="number" style="font-weight: bold;text-align: left;">{{allTotal}}

                                </td>
                            </tr>

                            </tbody>
                        </table>

                    </div>

                </div>





            </div>
            <div class="clear-both"></div>

            <div class="clear-both"></div>
            &nbsp;
            <div class="row-fluid">
                <div class="app-form2 span12" style="padding-left: 0" >
                    <ng-include src="'/public/pages/dashboard/partials/right-panel.html'"></ng-include>

                </div>


            </div>
        </accordion-group>
    </accordion>
</div>
